<template>
  <view class="roc-upload-image">
    <roc-upload
      :action="action"
      :header="header"
      :disabled="disabled"
      :file-list="fileList"
      :show-progress="false"
      :max-count="limit"
      @on-uploaded="successUpload"
      @on-error="errorUpload"
      @on-remove="remove"
      width="150"
      height="150"
    ></roc-upload>
  </view>
</template>

<script>
import Emitter from './mixins/emitter.js'
import RocUpload from './components/roc-upload/roc-upload.vue'
import { tokenKey, devBaseUrl, prodBaseUrl } from '@/config/index.js'

export default {
  name: 'roc-upload-image',
  mixins: [Emitter],
  components: {
    RocUpload,
  },
  props: {
    action: {
      type: String,
      default: '',
      required: true,
    },
    header: {
      type: Object,
      default() {
        return {}
      },
    },
    limit: {
      type: Number,
      default: 1,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      formdata: {},
      fileList: [],
    }
  },
  mounted() {
    setTimeout(() => {
      this.fileList = this.value.map((url) => ({ url }))
    }, 100)
  },
  methods: {
    successUpload(lists) {
      this.changes(lists)
    },
    remove(index, lists, name) {
      this.changes(lists)
    },
    changes(lists) {
      let urls = []
      lists.map((item) => {
        //编辑时，已存在的图片没有response
        if (!item.response) {
          urls.push(item.url)
        } else if (item.response.code) {
          urls.push(item.response.data)
        }
      })
      // urls: ['/img_test/1651216317_app-icon.png']
      this.$emit('input', urls)
    },
    errorUpload(e) {
      this.$u.toast('上传失败了！')
    },
  },
}
</script>

<style lang="scss" scoped>
.roc-upload-image {
  width: 100%;
}
</style>
